<script setup lang="ts">
import v from '@/plugins/validate'
import store from '@/utils/store'

// const { login } = useAuth()
const { yup, Form, Field, ErrorMessage } = v

const schema = yup.object({
  account: yup.string().required().email().label('账号'),
  password: yup.string().required().min(6).label('密码'),
})

function onSubmit(values: any) {
  console.log(values)
  alert('33')

  // store.set('token', { expire: 100, token: '123' })
  console.log(store.get('token'))
}
</script>

<template>
  <div class="p-10 h-[350px] flex flex-col justify-between">
    <div>
      <h2 class="text-center text-lg">会员登录</h2>
      <Form @submit="onSubmit" :validation-schema="schema">
        <Field name="account" class="lj-input" placeholder="请输入手机号或邮箱" />
        <ErrorMessage name="account" as="div" class="lj-error" />

        <Field name="password" class="lj-input mt-4" placeholder="请输入密码" type="password" />
        <ErrorMessage name="password" as="div" class="lj-error" />

        <button type="submit" class="lj-button mt-4">登录</button>
      </Form>
    </div>

    <div class="grid grid-flow-col gap-2 justify-center items-center mt-5">
      <el-button link class="lj-a" @click="$router.push({ name: 'register' })">会员注册</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.lj-a {
  @apply text-sm text-gray-500;
}
</style>

<script lang="ts">
export default {
  route: { name: 'login' },
}
</script>
